<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
</head>
<body>
<div th:fragment="navbar">
    <nav class="navbar navbar-expand-md fixed-top navbar-light bg-warning">
        <div class="container">
            <a class="navbar-brand font-weight-bolder" href="/">Blog</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon">
            <!--此处为折叠后的按钮-->
        </span>
            </button>
            <div id="navbarSupportedContent" class="collapse navbar-collapse">
                <ul class="navbar-nav mr-auto font-weight-bold">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle " href="#" data-toggle="dropdown">
                            快捷操作
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="/user">用户页面</a>
                            <a class="dropdown-item" href="/admin">管理员页面</a>
                            <a class="dropdown-item" href="/login">登录页面</a>
                            <a class="dropdown-item" href="/register">注册界面</a>
                            <div sec:authorize="hasRole('ROLE_USER')" class="dropdown-divider"></div>
                            <a sec:authorize="hasRole('ROLE_USER')" class="dropdown-item" href="/editor">写Blog</a>
                        </div>
                    </li>
                    <li sec:authorize="hasRole('ROLE_USER')" class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle " href="#" data-toggle="dropdown">
                            我的
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="/user">用户页面</a>
                            <a sec:authorize="hasRole('ROLE_BLOG')" class="dropdown-item" href="/editor">写Blog</a>
                            <a sec:authorize="!hasRole('ROLE_BLOG')" class="dropdown-item"
                               href="/editor">充值权限(升级到博主)</a>
                            <a class="dropdown-item" href="/user/follow_show">关注列表</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="/logout">退出登录</a>
                        </div>
                    </li>

                </ul>
                <ul class="navbar-nav mr-auto font-weight-bolder">
                    <li sec:authorize="hasRole('ROLE_USER')" class="nav-item float-lg-right">
                        <span class="navbar-text">欢迎</span> <span class="navbar-text" sec:authentication="name"></span>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="搜索">
                    <button class="btn btn-outline-dark my-2 my-sm-0" type="submit">搜索</button>
                </form>
            </div>
        </div>
    </nav>
</div>
<div th:fragment="advertisement">
    <div id="advertisementCarousel" class="carousel slide carousel-fade w-25 float-right" data-ride="carousel">
        <a tabindex="0" data-toggle="popover" data-trigger="focus" title="友情链接"
           data-content="本应用适合18岁及以上年龄用户，请未满18岁的用户自觉离开">
            广告
        </a>
        [<a class="text-decoration-none text-dark" href="javascript:void(0);" onclick="removeCarousel()">X</a>]
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595044872126&di=46cf9157214446ee15dfde64d72666ce&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3294535560%2C2836415746%26fm%3D214%26gp%3D0.jpg"
                     class="d-block w-100" alt="新版本介绍">
                <div class="jumbotron">
                    <h1 class="display-4">渣渣辉</h1>
                    <p class="lead">探挽懒月，介四里没有挽过的船新版本</p>
                    <a class="text-decoration-none" target="_blank"
                       href="https://www.bh3.com/news/7593?cate=171">船新版本</a>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4198912114,1279055649&fm=26&gp=0.jpg"
                     class="d-block w-100" alt="xxx">
                <div class="jumbotron">
                    <h1 class="display-4">轱天乐</h1>
                    <p class="lead">挤需体验三番钟，里造会干我一样，爱象戒宽油系</p>
                    <a class="text-decoration-none" target="_blank"
                       href="https://getbootstrap.com/docs/4.5/getting-started/introduction/">立即体验</a>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595044958393&di=4bda5ecc43685075f626cca230738d1b&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F7dea328bf87dea2073f93a95944cfe6040ac8233.jpg"
                     class="d-block w-100" alt="点击查看'砍我一刀'">
                <div class="jumbotron ">
                    <h1 class="display-4">一刀999</h1>
                    <p class="lead">是兄弟 就来砍我一刀吧!</p>
                    <a class="text-decoration-none" target="_blank" href="https://www.bilibili.com/video/BV1UT4y1J7xN">砍我一刀！</a>
                </div>
            </div>
        </div>
    </div>
    <script>
        function removeCarousel() {
            $('#advertisementCarousel').remove()
        }

        $('.popover-dismiss').popover({
            trigger: 'focus'
        })
        //加了才有效
        $('[data-toggle="popover"]').popover()
    </script>
</div>
<div th:fragment="info">
    <div class="p-2 m-2">
        <p>你的当前用户名是：</p>
        <p sec:authentication="name"></p>
        <p>你的权限是：</p>
        <p sec:authentication="authorities"></p>
    </div>
</div>
</body>
</html>